<div id="appCmsSite">
<el-row>
<el-col :span="24">
	<el-breadcrumb separator-class="el-icon-arrow-right">
	<el-breadcrumb-item>首页</el-breadcrumb-item>
	<el-breadcrumb-item>内容管理</el-breadcrumb-item>
	<el-breadcrumb-item>站点管理</el-breadcrumb-item>
	</el-breadcrumb>
</el-col>
</el-row>
<el-row>
<el-col :span="24"align="right">
	<el-button @click="handleAddCmsSite" size="small" type="success" icon="el-icon-circle-plus-outline">添加站点</el-button>
</el-col>
</el-row>
<br>
<el-row>
<el-col :span="24">
	<el-table ref="tableCmsSite" :data="tableCmsSiteData" border stripe fit highlight-current-row
		v-loading="tableCmsSiteLoading" max-height="1200">
	    <el-table-column type="index" label="序号" :index="indexMethod" width="80">
	    </el-table-column>
		<el-table-column prop="id" label="站点ID" width="80">
		</el-table-column>
		<el-table-column prop="isHttps" label="Https" width="80">
	      <template slot-scope="scope">
	        {{scope.row.isHttps === true ? 'https' : 'http'}}
	      </template>		
		</el-table-column>
		<el-table-column prop="domain" label="域名" width="180">
		</el-table-column>
		<el-table-column prop="title" label="站点名称" width="180" :show-overflow-tooltip="true">
		</el-table-column>
		<el-table-column prop="tags" label="标签" width="320" :show-overflow-tooltip="true">
		</el-table-column>
		<el-table-column prop="siteDesc" label="描述" width="360" :show-overflow-tooltip="true">
		</el-table-column>
	    <el-table-column label="操作" width="180">
			<template slot-scope="scope">
				<el-button @click="handleEditCmsSite(scope.$index, scope.row)" type="text" size="small">编辑</el-button>
			</template>
	    </el-table-column>
	</el-table>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
	<el-pagination
		@size-change="handleSizeChange"
		@current-change="handleCurrentChange"
		:current-page="page"
		:page-sizes="[1, 10, 20, 50, 100]"
		:page-size="20"
		layout="total, sizes, prev, pager, next, jumper"
		:total="total">
	</el-pagination>
</el-col>
</el-row>

<el-dialog :title="dialogCmsSiteTitle" :visible.sync="dialogCmsSiteVisible" width="900px" @closed="dialogCmsSiteClosed">
	<el-form ref="formCmsSite" :model="modelCmsSite" status-icon :rules="rulesCmsSite">
		<el-form-item label="域名" :label-width="formCmsSiteLabelWidth" prop="domain">
			<el-input v-model="modelCmsSite.domain" autocomplete="off" maxlength="50" class="input-with-select">
				<el-select v-model="modelCmsSite.isHttps" slot="prepend" placeholder="请选择是否是Https协议">
					<el-option v-for="option in isHttpsOptions" :key="option.value" :label="option.label" :value="option.value"></el-option>
				</el-select>
			</el-input>			
		</el-form-item>
		<el-form-item label="站点名称" :label-width="formCmsSiteLabelWidth" prop="title">
			<el-input v-model="modelCmsSite.title" autocomplete="off" maxlength="100"></el-input>
		</el-form-item>
		<el-form-item label="标签" :label-width="formCmsSiteLabelWidth" prop="tags">
			<el-input v-model="modelCmsSite.tags" autocomplete="off" maxlength="200"></el-input>
		</el-form-item>
		<el-form-item label="描述" :label-width="formCmsSiteLabelWidth" prop="siteDesc">
			<el-input v-model="modelCmsSite.siteDesc" autocomplete="off" maxlength="300" type="textarea" :rows="4"></el-input>
		</el-form-item>
		<el-form-item label="Logo" :label-width="formCmsSiteLabelWidth" prop="logo">
			<el-input v-model="modelCmsSite.logo" autocomplete="off" maxlength="200"></el-input>
		</el-form-item>
		<el-form-item label="备案信息" :label-width="formCmsSiteLabelWidth" prop="beian">
			<el-input v-model="modelCmsSite.beian" autocomplete="off" maxlength="200"></el-input>
		</el-form-item>
		<el-form-item label="版权信息" :label-width="formCmsSiteLabelWidth" prop="copyright">
			<el-input v-model="modelCmsSite.copyright" autocomplete="off" maxlength="200"></el-input>
		</el-form-item>
	</el-form>
	<div slot="footer" class="dialog-footer">
		<el-button @click="dialogCmsSiteVisible = false">取 消</el-button>
		<el-button type="primary" :loading="isButtonLoadingCmsSite" @click="onSubmitCmsSite">确 定</el-button>
	</div>
</el-dialog>
</div>

<script>
	var appCmsSite = new Vue({
		el: '#appCmsSite',
		data() {
			var checkDomain = (rule, value, callback) => {
		        if (!value) {
		          return callback(new Error('域名不能为空'));
		        } else {
		        	callback();
		        }
			};
			var checkTitle = (rule, value, callback) => {
		        if (!value) {
		          return callback(new Error('站点名称不能为空'));
		        } else {
		        	callback();
		        }
			};
			return {
				urlPostCmsSiteList: '/api/cms/site/list',
				urlPostCmsSiteSave: '/api/cms/site/save',
				page: 1,
				rows: 20,
				total: 100,
				tableCmsSiteData: [],
				tableCmsSiteLoading: false,
				dialogCmsSiteVisible: false,
				dialogCmsSiteTitle: '添加站点',
				isHttpsOptions: [{
					label: 'http://', value: false
				},{
					label: 'https://', value: true
				}],
				modelCmsSite: {
					id: null,
					domain: '',
					title: '',
					tags: '',
					siteDesc: '',
					logo: '',
					isHttps: false,
					beian: '',
					copyright: ''
				},
				rulesCmsSite: {
					domain: [{validator: checkDomain, trigger: 'blur'}],
					title: [{validator: checkTitle, trigger: 'blur'}]
				},
				formCmsSiteLabelWidth: '80px',
				isButtonLoadingCmsSite: false
			}
		},
		methods: {
			/* Table */
			loadtableCmsSiteData() {
				this.tableCmsSiteLoading = true;
				this.$http.post(this.urlPostCmsSiteList, {page: this.page, rows: this.rows}, {emulateJSON: true}).
				then(function(response) {
					if (response.body.status == 200) {
						this.tableCmsSiteData = response.body.data.list;
						this.total = response.body.data.total;
						this.tableCmsSiteLoading = false;
					}
				}).catch(function (error) {
					console.log(error);
				});	
			},
			handleSizeChange(val) {
				console.log('每页' + val + '条');
				this.rows = val;
				this.loadtableCmsSiteData();
			},
			handleCurrentChange(val) {
				console.log('当前页:' + val);
				this.page = val;
				this.loadtableCmsSiteData();
			},
			handleAddCmsSite() {
				this.dialogCmsSiteTitle = '添加站点';
				this.dialogCmsSiteVisible = true;
			},
			handleEditCmsSite(index, row) {
				console.log(index, row);
				//this.$message(row.id + '');
				this.dialogCmsSiteTitle = '修改站点';
				this.dialogCmsSiteVisible = true;
				this.modelCmsSite.id = row.id;
				this.modelCmsSite.domain = row.domain;
				this.modelCmsSite.title = row.title;
				this.modelCmsSite.tags = row.tags;
				this.modelCmsSite.siteDesc = row.siteDesc;
				this.modelCmsSite.logo = row.logo;
				this.modelCmsSite.isHttps = row.isHttps;
				this.modelCmsSite.beian = row.beian;
				this.modelCmsSite.copyright = row.copyright;
			},
			indexMethod(index) {
				return index + 1;
			},
			dateFormat(row, column, cellValue, index) {
				var date = new Date(cellValue);
				return formatDate(date, "yyyy-MM-dd hh:mm:ss");
			},
			/* Edit */
			onSubmitCmsSite() {
				this.isButtonLoadingCmsSite = true;
				this.$refs.formCmsSite.validate((valid) => {
					if (valid) {
						this.$refs.formCmsSite.$http.post(this.urlPostCmsSiteSave, this.modelCmsSite, {emulateJSON: true})
						.then(function (response) {
							if (response.body.status == 200) {
								this.$message({
									message: "保存成功",
									type: "success"
								});
								appCmsSite.isButtonLoadingCmsSite = false;
								appCmsSite.dialogCmsSiteVisible = false;								
								appCmsSite.loadtableCmsSiteData();
							} else {
								this.$message.error(response.body.msg);
								appCmsSite.isButtonLoadingCmsSite = false;
							}
						}).catch(function (error) {
							console.log(error);
						});							
					}
				});
			},
			resetForm() {
				this.modelCmsSite = {
						id: null,
						domain: '',
						title: '',
						tags: '',
						siteDesc: '',
						logo: '',
						isHttps: false,
						beian: '',
						copyright: ''
				};
				this.$refs.formCmsSite.resetFields();
			},
			dialogCmsSiteClosed() {
				this.resetForm();
			}
		},
		created() {
			this.loadtableCmsSiteData();
		}
	})
</script>